<template>
    <div class="equipment-alarm flex">
        <div class="flex flex-direction justify-center filter-tab">
            <span 
                v-for="item in filterTab" :class="item.icode == currentTab ? 'active' : ''" 
                @click="handleClick(item.icode)">{{item.label}}</span>
        </div>
        <div class="right-content">
            <el-table
                :data="tableData"
                :header-row-style="{ background: '#f2f2f2' }"
                id="table"
                :height="tableHeight + 50"
                border
                style="width: 100%;"
                size="small">
                <el-table-column
                    v-for="item in tableHeaderColumn"
                    :prop="item.prop"
                    :label="item.label"
                    :width="item.width">
                </el-table-column>
            </el-table>
            <el-pagination
                layout="prev, pager, next, total"
                :total="1000">
            </el-pagination>
        </div>
    </div>
</template>

<script>
export default {
    name: 'equipment-alarm',
    props: {
        tableHeight: {
            type: Number,
            default: 350
        }
    },

    created() {
        
    },

    data() {
        return {
            size: 'mini',
            form: {
                code: '',
                name: '',
                time: ''
            },
            filterTab: [
                {label: '按行政区划统计', icode: 'address'},
                {label: '按取水用户统计', icode: 'useWaterStatistics'}
            ],
            currentTab: 'address',
            tableHeaderColumn: [
                { label: '序号', prop: 'sn', width: 50 },
                { label: '行政区', prop: 'address'},
                { label: '今日取水量（万m³）', prop: 'todayNumber' },
                { label: '本月取水量（万m³）', prop: 'monthNumber'},
                { label: '本年取水量（万m³）', prop: 'yearNumber'},
            ],
            tableData: [
                {sn: 1},
                {sn: 2},
                {sn: 3},
                {sn: 4 },
                {sn: 5},
                {sn: 6},
                {sn: 7},
                {sn: 8},
                {sn: 9},
                {sn: 10},
                {sn: 11},
                {sn: 12},
            ],
            
        };
    },

    methods: {
        onSearch() {
            
        },

        handleClick() {

        }
    }
};
</script>

<style lang="scss" scoped>
// #6edef1
    .equipment-alarm {
        padding: 0px 15px;
        .filter-tab {
            margin-right: 20px;
            width: 100px;
            span {
                padding: 8px 10px;
                color: #333;
                border: 1px solid #169bd5;
                border-radius: 6px;
                margin-bottom: 15px;
                text-align: center;
                &.active {
                    background: #169bd5;
                    color: #ffffff;
                }
            }
        }
        .right-content {
            width: calc(100% - 120px);
        }
        :deep{
            .el-input__inner {
                background-color: rgba(110, 224, 241, 0);
                border: 1px solid rgba(110, 224, 241, 1);
                border-radius: 15px;
                padding-right: 10px;
                font-size: 14px;
            }

            .el-range-input {
                background: rgba(110, 224, 241, 0);
            }

            .el-table__body {
                .el-table__cell {
                    padding: 5px 0;
                }
            }

            .el-table--border::after, .el-table--group::after, .el-table::before {
                background-color: rgba(110, 224, 241, 0.4);
            }

            .el-table thead tr th {
                background: #f0f0f0;
            }

            .el-table thead{
                color: rgba(0, 0, 0, 0.65);
                font-size: 14px;     
            }

            
            .el-table--border th.el-table__cell.gutter:last-of-type {
                border: none;
            }

            .el-button--mini {
                padding: 6px 10px;
            }

        }
        .el-pagination {
            display: flex;
            justify-content: center;
            margin-top: 10px;
            :deep {
                button {
                    background: rgba(0, 0, 0, 0);
                }
                .btn-prev, .btn-next {
                    background: rgba(0, 0, 0, 0);
                    color: #02A7F0;
                }
                .el-pager li {
                    background: rgba(0, 0, 0, 0);
                    color: #333;
                    font-size: 12px;
                }
                .el-pager li.active {
                    color: #1890ff;
                }
                .el-pager li:hover {
                    color: #1890ff;
                }

                button:disabled {
                    color: #c0c4cc;
                }
                
            }
        }
    }

    
    
</style>